<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
         
          <!-- 表格内容 -->
          <el-table :data="tableData" style="width: 100%" v-loading="loading" border>

            <el-table-column prop="question_num" width="150" label="诉求编号" fixed>
            </el-table-column>
            <el-table-column prop="company" label="企业名称" width="250"   :show-overflow-tooltip="true"  fixed>
            </el-table-column>
            <el-table-column prop="content" label="内容" width="350">
            </el-table-column>
            <el-table-column prop="gname" label="诉求分类" width="150">

            </el-table-column>
            <el-table-column prop="target"  label="申诉部门" width="120"  :show-overflow-tooltip="true" >
            </el-table-column>
            <el-table-column prop="remarks"  label="申诉内容" width="350">
            </el-table-column>
            <el-table-column prop="sup_attach" label="附件" width="350">
               <template slot-scope="scope">
                  <a style="display:block;color:#444;" v-for="(list,index) in JSON.parse(scope.row.sup_attach)" target="_blank" :key="index" :href="hostname+list.url">{{list.name}}</a>
                </template> 
                
            </el-table-column>
            <el-table-column prop="addtime" width="150" label="申诉时间">

            </el-table-column>

            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1" class="red">未受理</span>
                <span v-else-if="scope.row.status == 2">受理中</span>
                <span v-else-if="scope.row.status == 3" class="green">已完成</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                  <el-button @click="agree(scope.row)" type="text" size="mini">
                    同意
                  </el-button>
                  <el-button @click="noAgree(scope.row)" type="text" size="mini">
                    驳回
                  </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="30%"
              >
              <span>{{scontent}}</span>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible=false">取 消</el-button>
                  <el-button type="primary" @click="confirm">确 定</el-button>
                  
              </span>
          </el-dialog>
          <div class="zpage">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size.sync="pagesize"
                layout="total, prev, pager, next, jumper"
                :total.sync="pagetotal">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    
  </div>
</template>
<script>
import actionurl from '@/assets/js/actionurl'
import officeList from '@/components/manageOffice/List'
import alertTem from '@/components/alertTem'
import config from '../../config';

  export default {
    components:{
      officeList,
      alertTem
    },
    data() {
      return {
        hostname:'',
        sup_attach:[],
        alertType:true,
        dialogVisible:false,
        layerstatus:false,
        tableData:[],
        scontent:'确定同意吗',
        title:'同意',
        targetArr:[],
        target:'',
        status:'',
        currentPage:1,
        pagesize:10,
        pagetotal:10000,
        moveTarget:'',
        movegname:'',
        loading:false,
        MessageGroupArr:'',
        listID:'',
        aid:'',
        whether:3//默认同意，
      }
    
    },
    methods: {
      formatterColumn(row, column, cellValue, index) {
 
            var attachArr = [];
            attachArr =JSON.parse(row.sup_attach);
            var html = '';
            for(let i =0;i<attachArr.length;i++){
          
                html += '<a href="'+attachArr[i].url+'">'+attachArr[i].name+'</a><br>'
            }
            return html
      },
      MessageList(){// 获取列表
        var _this = this;
        actionurl.yxAppealList({
            pageNum:_this.pagesize,
            pageOn:_this.currentPage,
          }, function(re) {
          if(re.status == 1){
             _this.tableData = re.data;
            _this.pagetotal = re.count;
            
            _this.loading = false;
          }else{
            _this.$message(re.msg);
          }
           
        });
      },
      handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.MessageList();
      },
      agree(row){//同意按钮
        this.dialogVisible = true;  
        this.listID = row.id;
        this.aid = row.aid;
      },
      confirm(row){//确定事件
        var _this = this;
        actionurl.doAppeal({
            id:_this.listID,
            aid:_this.aid,
            whether:this.whether
          }, function(re) {
            console.log(re);
          if(re.status == 1){
            
            _this.$message(re.msg);
            _this.dialogVisible = false;  
            _this.MessageList();
            // _this.$router.push({path: '/handleList'});
          }else{
            _this.$message(re.msg);
            _this.dialogVisible = false;  
          }
          
        });
        
       
      },
      noAgree(row){
        this.title="驳回";
        this.scontent = '确定驳回吗？';
        this.dialogVisible = true;  
        this.listID = row.id;
        this.aid = row.aid;
        this.whether = 2;//驳回参数
      }
     
    },
    mounted() {
      
    },
    created() {
      this.MessageList();
      this.hostname = config.URLWEBHTTP;

    },
  }
</script>
<style scoped lang="scss">

</style>
